﻿@model WeddingEventManagementApp.Models.EventMain_VM
@{
    ViewBag.Title = "Event Overview";
}

<div class="twelve columns">
    <h3 style="display: inline-block">Events</h3>
    @Html.ActionLink("Click to Add Event", "Create", "Event", null, new { @class = "button success right" })
</div>

<div class="nine column">
    <div id="calendar" style="width: 100%;" class="hide-for-small"></div>
     
</div>

<div class="three column sidebar">
   

    <h5 class="hide-for-small">Filters</h5>
    <ul class="no-bullet panel hide-for-small">
    @foreach (var item in Model.EventTypes)
    {
        <li>
            <i data-toggle="@item.EventTypeName.Replace(" ", "")" class="icon-checkbox filter-events @item.EventTypeName.Replace(" ", "")-filter"></i>
            <span style="color: white;  padding: 1px 5px; background-color: @item.CalendarColor; font-weight: 600;">@item.EventTypeName</span>
        </li>
    }
    </ul>
    
    <h5>Upcoming Events</h5>
    <ul class="event-list no-bullet">
    @foreach (var item in Model.UpcomingEvents)
    {
        <li>
            <a href="@Url.Action("Details", new { id = item.EventID })" class="clearfix" style="border-color: @item.EventType.CalendarColor">
                <span class="event-date"  style="background: @item.EventType.CalendarColor">
                    <span class="event-dd">@item.StartDate.Day</span>
                    <span class="event-mm">@item.StartDate.ToString("MMM")</span>
                </span>
                <span class="event-title">
                    <p>@item.Title</p>
                    <span><i class="icon-clock"></i> @item.StartDate.ToShortTimeString()</span>
                </span>
            </a>
        </li>
    }
    </ul>
    <h5>Recently Viewed</h5>
    <ul class="event-list no-bullet">
    @foreach (var item in Model.RecentViewedEvents)
    {
        <li>
            <a href="@Url.Action("Details", new { id = item.EventID })" class="clearfix" style="border-color: @item.EventType.CalendarColor">
                <span class="event-date" style="background: @item.EventType.CalendarColor">
                    <span class="event-dd">@item.StartDate.Day</span>
                    <span class="event-mm">@item.StartDate.ToString("MMM")</span>
                </span>
                <span class="event-title">
                    <p>@item.Title</p>
                    <span><i class="icon-clock"></i> @item.StartDate.ToShortTimeString()</span>
                </span>
            </a>
        </li>
    }
    </ul>
</div>

@section scripts{
<script>
    $(document).ready(function () {

        // FullCalendar Plugin
        $("#calendar").fullCalendar({
            events: "/Event/GetEvents",
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month, agendaWeek, agendaDay'
            },
            editable: false,
            dayClick: function (e) {
                $("#calendar").fullCalendar('select', e, e, false);
            },
            loading: function (isLoading, view) {
                $('#calendar').css('opacity', '1');

                if (isLoading) $('#calendar').css('opacity', '0.4');
            },
            eventAfterRender: function (event, element, view) {
                var css = event.className[0];
                if ($('.' + css + '-filter').hasClass('icon-checkbox-unchecked'))
                    $(element).css('display', 'none');
            }
        });

        // Filter the Events
        $('.filter-events').click(function () {
            $this = $(this);

            if ($this.hasClass("icon-checkbox")) {
                $this.removeClass("icon-checkbox").addClass("icon-checkbox-unchecked");
                $('.' + $this.data('toggle')).fadeOut();
            } else {
                $this.removeClass("icon-checkbox-unchecked").addClass("icon-checkbox");
                $('.' + $this.data('toggle')).fadeIn();
            }
        });
    });
</script>
<script src="~/Scripts/events.js"></script>
}